<template>
  <div>
    <div id="bar"></div>
  </div>
</template>

<script>
import { getTrading, getTradingNum } from '@api/api'

  export default {
    name: 'Bar',
    data(){
      return{
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            textStyle: {
              fontSize: 12,
              color: '#fff'
            },
            data: ['新能源车', '传统车'],
          },
          /*toolbox: {
            feature: {
              saveAsImage: {}
            }
          },*/
          grid: {
            top: '20%',
            left: '3%',
            right: '10%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                rotate:0, // y轴字体倾斜角度
                textStyle: {
                  color: '#fff'
                }
              },
              data: [],
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          series: [
            {
              name: '新能源车',
              type: 'line',
              stack: '总量',
              areaStyle: {
                color: { // 颜色渐变
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#73e7e1' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00998f' // 100% 处的颜色1
                  }]
                },
                shadowBlur: 2,
                shadowColor: '#00ffff',
              },
              itemStyle: {
                normal: {
                  color: { // 颜色渐变
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#73e7e1' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#00998f' // 100% 处的颜色1
                    }]
                  },
                }
              },
              data: [],
            },
            {
              name: '传统车',
              type: 'line',
              stack: '总量',
              areaStyle: {
                color: { // 颜色渐变
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#fca55f' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#d57121' // 100% 处的颜色1
                  }]
                },
                shadowBlur: 2,
                shadowColor: '#fca55f',
              },
              itemStyle: {
                normal: {
                  color: { // 颜色渐变
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#fca55f' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#d57121' // 100% 处的颜色1
                    }]
                  },
                }
              },
              data: []
            }
          ]
        }

      }
    },
    mounted(){
      this.getTradingNum()
    },
    methods: {
      drawLine(){
        let bar = this.$echarts.init(document.getElementById('bar'))
        bar.setOption(this.option);
        let sizeFun = function () {
          bar.resize()
        }
        window.addEventListener('resize', sizeFun )
      },
      getTradingNum(){
        var that = this
        getTradingNum().then((res)=>{
          let data = [];
          let data1 = []
          let data2 = []
          if(res.success){
            that.model = res.result
            for(var i=0;i<that.model.length;i++){
              data.push(that.model[i].name);
              data1.push(that.model[i].cnt1);
              data2.push({value:that.model[i].cnt2});
            }
            that.option.xAxis[0].data = data;
            that.option.series[0].data = data1;
            that.option.series[1].data = data2;
            this.drawLine()
          }
        })
      }
    }
  }
</script>

<style scoped>
 #bar {
   width: 100%;
   height: 22vh;
 }
</style>